<template>
  <!-- 年龄比例 -->
  <div class="echarts">
    <ECharts :option="option" :resize="false" />
  </div>
</template>

<script setup lang="ts">
import ECharts from "@/components/ECharts/index.vue";
import { ECOption } from "@/components/ECharts/config";

const barWidth = 30;
let Ydata1 = [0, 546, 1771]
let Ydata2 = [121, 629, 3484]
let xData = ['一月', '二月', '三月']
const color2 = {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  type: 'linear',
  global: false,
  colorStops: [
    {
      //第一节下面
      offset: 0,
      color: '#1C98CD',
    },
    {
      offset: 1,

      color: 'rgba(61,187,255,.16)',
    },
  ],
};
const color1 = {
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  type: 'linear',
  global: false,
  colorStops: [
    {
      //第一节下面
      offset: 0,
      color: '#E7AB47',
    },
    {
      offset: 1,
      color: 'rgba(255,164,41,.16)',
    },
  ],
};
const option: ECOption = {
  backgroundColor: 'transparent', //背景色
  legend: {
    data: ['1', '2'],
    icon: 'circle',
    top: "10%",
    right: "center",
    textStyle: {
      color: '#fff',
      fontWeight: 'normal',
      fontSize: 12,
    },
  },
  //提示框
  tooltip: {
    show: false,
    trigger: 'axis',
    axisPointer: {
      type: 'none',
    },
  },
  grid: {
    top: '18%',
    left: '5%',
    bottom: '10%',
    right: '5%',
    containLabel: true,
  },
  animation: false,
  xAxis: [
    {
      type: 'category',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        textStyle: {
          color: "#019bdd",
        },
        lineStyle: {
          color: "#019bdd", //刻度线的颜色
        },
      },
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#fff',
          fontWeight: 'normal',
          fontSize: 12,
        },
        margin: 20, //刻度标签与轴线之间的距离。
      },
      data: xData,
    },
    {
      type: 'category',
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      data: xData,
    },
  ],
  yAxis: [
    {
      show: true,
      type: 'value',
      axisLabel: {
        show: true,
        textStyle: {
          color: '#fff',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#064e78",
        },
      },
      axisLine: {
        show: true,
        textStyle: {
          color: "#019bdd",
        },
        lineStyle: {
          color: "#019bdd", //刻度线的颜色
        },
      },
    },
  ],
  series: [
    {
      name: '1',
      type: 'pictorialBar',
      symbolSize: [barWidth, 10],
      symbolOffset: ['-81%', -5],
      symbolPosition: 'end',
      z: 15,
      color: '#ffa876',
      zlevel: 2,
      data: Ydata1,
    },
    {
      name: '2',
      type: 'pictorialBar',
      symbolSize: [barWidth, 10],
      symbolOffset: ['81%', -5],
      symbolPosition: 'end',
      z: 15,
      color: '#3aa8ff',
      zlevel: 2,
      data: Ydata2,
    },

    {
      name: '1',
      type: 'bar',
      barGap: '60%',
      barWidth: barWidth,
      itemStyle: {
        //
        // color: '',
        color: color1,
        borderColor: color1,
        borderWidth: 1,
        borderType: 'solid',
      },
      label: {
        show: true,
        position: 'top',
        // color: 'rgba(119,167,255,1)',
        color: '#fff',
        fontSize: 12,
        textAlign: 'center',
      },
      zlevel: 2,
      data: Ydata1,
    },
    {
      name: '2',
      type: 'bar',
      barGap: '60%',
      barWidth: barWidth,
      itemStyle: {
        // color: 'rgba(255,164,41,.16)',
        color: color2,
        borderColor: color2,
        borderWidth: 1,
        borderType: 'solid',
      },
      label: {
        show: true,
        position: 'top',
        color: '#fff',
        fontSize: 12,
        textAlign: 'center',
      },
      zlevel: 2,
      data: Ydata2,
    },
    {
      name: '黄色底座',
      type: 'pictorialBar',
      symbolSize: [barWidth, 10],
      symbolOffset: ['-81%', 5],
      z: 12,
      color: '#ffa876',
      data: [
        {
          name: '',
          value: '100',
        },
        {
          name: '',
          value: '100',
        },
        {
          name: '',
          value: '100',
        },
      ],
    },
    {
      name: '蓝色底座',
      type: 'pictorialBar',
      symbolSize: [barWidth, 10],
      symbolOffset: ['81%', 5],
      z: 12,
      color: '#3aa8ff',
      show: false,
      data: [
        {
          name: '',
          value: '100',
        },
        {
          name: '',
          value: '100',
        },
        {
          name: '',
          value: '100',
        }
      ],
    }
  ],
};
</script>
<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
